<template>
  <el-container class="bigBox">
    <!-- 头部区域 -->
    <el-header>
      <div class="titleBox">
        <img src="~@/assets/img/loginImg.webp" alt="">
        <p>电商后台管理系统</p>
        <p>Version：1.3.0</p>
      </div>
    <!-- 退出登录 -->
      <el-button type="info" @click="loginOut">退出</el-button>
    </el-header>
    <!-- 主题部分 -->
    <el-container>
    <!-- 侧边栏区域 -->
      <el-aside :width="isShow?'200px':''">
        <!-- 折叠栏按钮 -->
        <div :class="isShow?'iconfont icon-houtui fold':'iconfont icon-qianjin fold'" @click="handleFold"></div>
        <!-- 菜单栏 -->
        <el-menu
          :default-active="routePath"
          :router="true"
          :collapse-transition='false'
          :collapse="!isShow"
          :unique-opened="true"
          background-color="#333744"
          text-color="#fff">
          <!-- 一级菜单栏 -->
          <el-submenu :index="indexs+''" v-for="(items,indexs) in LeftMenuBarList" :key="indexs">
            <!-- 菜单栏模板 -->
            <template slot="title" class="first_menu">
              <i :class="iconList[indexs]"></i>
              <span>{{items.authName}}</span>
            </template>
            <!-- 二级菜单栏 -->
            <el-menu-item :index="'/'+data.path" v-for="(data,number) in items.children" :key="number" @click="keepStatus('/'+data.path)">
              <template slot="title">
                <i class="iconfont icon-group_info"></i>
                <span>{{data.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {LeftMenuBarData} from '@/request/api'
export default {
  name:'Home',
  data(){
    return{
      // 左侧数据
      LeftMenuBarList:[],
      // 左侧图标数组
      iconList:['iconfont icon-yonghu',
      'iconfont icon-quanxian1','iconfont icon-shangpingouwudai','iconfont icon-dingdan','iconfont icon-shuju','iconfont icon-shuju'],
      isShow:true,
      // 二级菜单状态保持
      routePath:''
    }
  },
  created(){
    //获取左菜单栏数据
    LeftMenuBarData().then(res=>{
      if(res.meta.status==200){
        console.log(res);
        this.LeftMenuBarList = res.data
      }
      return
    })
    this.routePath = sessionStorage.getItem('routePath')
  },
  methods:{
    //退出登录
    loginOut(){
      sessionStorage.clear()
      this.$router.push('/login')
      this.$message.success('退出成功')
    },
    //点击折叠按钮
    handleFold(){
      this.isShow=!this.isShow
    },
    // 激活当前菜单
    keepStatus(item){
      sessionStorage.setItem('routePath',item)
      this.routePath = item
    }
  }
}
</script>

<style scoped lang="less">
  .bigBox{
    height: 100%;
    .el-header{
      background-color: #373d41;
      display: flex;
      justify-content: space-between;
      .titleBox{
        color: #fff;
        display: flex;
        align-items: center;
        img{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 20px;
        }
        p:nth-child(2){
          margin-right: 20px;
          font-size: 22px;
          font-weight: 700;
        }
      }
    }
    .el-aside{
      background-color: #333744;
      .fold{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 24px;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
      }
      .iconfont{
        margin-right: 5px;
      }
      .el-menu{
        border-right:none;
      }
    }
    .el-main{
      background-color: #eaedf1;
    }
  }
</style>